import React from 'react';
import { cn } from '../../utils/cn';

interface StatusIndicatorProps {
  status: 'connected' | 'connecting' | 'disconnected';
  size?: 'sm' | 'md' | 'lg';
  showLabel?: boolean;
  className?: string;
}

const StatusIndicator: React.FC<StatusIndicatorProps> = ({
  status,
  size = 'md',
  showLabel = false,
  className
}) => {
  const statusConfig = {
    connected: {
      color: 'bg-green-500',
      label: '已连接',
      icon: '✓'
    },
    connecting: {
      color: 'bg-yellow-500',
      label: '连接中',
      icon: '⟳'
    },
    disconnected: {
      color: 'bg-red-500',
      label: '未连接',
      icon: '✕'
    }
  };

  const sizes = {
    sm: 'h-2 w-2',
    md: 'h-3 w-3',
    lg: 'h-4 w-4'
  };

  const config = statusConfig[status];

  return (
    <div className={cn('flex items-center space-x-2', className)}>
      <div className="relative">
        <div className={cn(
          'rounded-full',
          config.color,
          sizes[size]
        )} />
        <div className={cn(
          'absolute inset-0 rounded-full animate-ping opacity-75',
          config.color,
          sizes[size]
        )} />
      </div>
      {showLabel && (
        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
          {config.label}
        </span>
      )}
    </div>
  );
};

export default StatusIndicator;
